<template>
  <div class="dashboard-container">
    <!-- 页面标题和时间筛选 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="date-type-selector">
          <span
            v-for="type in dateTypes"
            :key="type.value"
            :class="{ active: activeDateType === type.value }"
            @click="handleDateTypeChange(type.value)"
          >
            {{ type.label }}
          </span>
        </div>
        <el-date-picker
          v-model="selectedDate"
          :type="datePickerType"
          :format="dateFormat"
          :value-format="dateFormat"
          placeholder="选择日期"
          class="date-picker"
          @change="handleDateChange"
        />
        <button class="search-btn" @click="handleSearch">搜索</button>
      </div>
    </div>

    <!-- 发电量概览卡片 -->
    <div class="power-overview">
      <div class="power-card" v-for="power in powerData" :key="power.type">
        <div class="card-icon" :style="{ backgroundColor: power.color }">
          <svg-icon :icon-class="power.icon" />
        </div>
        <div class="card-content">
          <div class="card-title">{{ power.name }}</div>
          <div class="card-value">
            <count-to
              :end-val="parseFloat(power.value)"
              :decimals="2"
              :duration="2000"
              :font-size="'20px'"
              :font-weight="'600'"
              :color="'#303133'"
            />
            <span class="unit">{{ power.unit }}</span>
          </div>
          <div class="card-trend">
            <span class="trend-label">{{ power.trend.label }}:</span>
            <span
              class="trend-value"
              :class="{
                positive: power.trend.value > 0,
                negative: power.trend.value < 0,
              }"
            >
              {{ power.trend.value > 0 ? "+" : "" }}{{ power.trend.value }}%
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 第一行：发电趋势分析和发电效率排行 -->
    <div class="charts-row">
      <!-- 左侧：发电趋势分析 -->
      <div class="chart-container trend-chart">
        <div class="chart-header">
          <div class="header-top">
            <h3>发电趋势分析</h3>
            <time-filter
              v-model="activeTrendTab"
              @change="handleTrendTabChange"
            />
          </div>
        </div>
        <div class="chart-content">
          <v-chart class="chart" :option="trendChartOption" />
        </div>
      </div>

      <!-- 右侧：发电效率排行 -->
      <div class="chart-container ranking-chart">
        <div class="chart-header">
          <div class="header-top">
            <h3>发电效率排行</h3>
            <time-filter
              v-model="activeRankingTab"
              @change="handleRankingTabChange"
            />
          </div>
        </div>
        <div class="chart-content">
          <div class="ranking-list">
            <div
              v-for="(item, index) in rankingData"
              :key="index"
              class="ranking-item"
            >
              <div class="ranking-info">
                <div class="ranking-name">{{ item.name }}</div>
                <div class="ranking-value">{{ item.value }}/Kwh</div>
              </div>
              <div class="ranking-bar">
                <div
                  class="bar-fill"
                  :style="{
                    width: (item.value / maxRankingValue) * 100 + '%',
                    backgroundColor: item.color,
                  }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第二行：尖峰平谷电价、报警数据、工单列表 -->
    <div class="bottom-row">
      <!-- 左侧：尖峰平谷电价 -->
      <div class="chart-container price-chart">
        <div class="chart-header">
          <div class="header-top">
            <h3>尖峰平谷电价</h3>
            <time-filter
              v-model="activePriceTab"
              @change="handlePriceTabChange"
            />
          </div>
        </div>
        <div class="chart-content">
          <v-chart class="chart" :option="priceChartOption" />
        </div>
      </div>

      <!-- 中间：报警数据 -->
      <div class="chart-container alarm-chart">
        <div class="chart-header">
          <div class="header-top">
            <h3>报警数据</h3>
            <time-filter
              v-model="activeAlarmTab"
              @change="handleAlarmTabChange"
            />
          </div>
        </div>
        <div class="chart-content">
          <v-chart class="chart" :option="alarmChartOption" />
        </div>
      </div>

      <!-- 右侧：工单列表 -->
      <div class="chart-container work-order-chart">
        <div class="chart-header">
          <div class="header-top">
            <h3>工单列表</h3>
            <time-filter
              v-model="activeWorkOrderTab"
              @change="handleWorkOrderTabChange"
            />
          </div>
        </div>
        <div class="chart-content">
          <div class="work-order-table">
            <div class="table-header">
              <div class="col-name">工单名称</div>
              <div class="col-time">时间</div>
              <div class="col-status">状态</div>
              <div class="col-action">操作</div>
            </div>
            <div class="table-body">
              <div
                v-for="(order, index) in workOrderData"
                :key="index"
                class="table-row"
              >
                <div class="col-name">{{ order.name }}</div>
                <div class="col-time">{{ order.time }}</div>
                <div class="col-status">
                  <span :class="'status-' + order.status">{{
                    order.statusText
                  }}</span>
                </div>
                <div class="col-action">
                  <button class="action-btn">处理</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import VChart from "vue-echarts";
import { ElDatePicker } from "element-plus";
import CountTo from "@/components/CountTo/index.vue";
import TimeFilter from "@/components/TimeFilter/index.vue";

// Register ECharts components
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);

// 日期类型选择
const activeDateType = ref("day");
const selectedDate = ref("2025-09-26");

const dateTypes = reactive([
  { label: "天", value: "day" },
  { label: "月", value: "month" },
  { label: "年", value: "year" },
]);

// 计算日期选择器类型和格式
const datePickerType = computed(() => {
  switch (activeDateType.value) {
    case "day":
      return "date";
    case "month":
      return "month";
    case "year":
      return "year";
    default:
      return "date";
  }
});

const dateFormat = computed(() => {
  switch (activeDateType.value) {
    case "day":
      return "YYYY-MM-DD";
    case "month":
      return "YYYY-MM";
    case "year":
      return "YYYY";
    default:
      return "YYYY-MM-DD";
  }
});

// 处理日期类型变化
const handleDateTypeChange = (type) => {
  activeDateType.value = type;

  // 根据类型调整默认日期
  switch (type) {
    case "day":
      selectedDate.value = "2025-09-26";
      break;
    case "month":
      selectedDate.value = "2025-09";
      break;
    case "year":
      selectedDate.value = "2025";
      break;
  }
};

// 处理日期变化
const handleDateChange = (date) => {
  selectedDate.value = date;
  console.log("日期变化:", date);
};

// 处理搜索
const handleSearch = () => {
  console.log("搜索参数:", {
    dateType: activeDateType.value,
    selectedDate: selectedDate.value,
  });
};

// 发电趋势分析标签页
const activeTrendTab = ref("day");

// 发电效率排行标签页
const activeRankingTab = ref("day");

// 报警数据标签页
const activeAlarmTab = ref("day");

// 工单列表标签页
const activeWorkOrderTab = ref("day");

// 尖峰平谷电价标签页
const activePriceTab = ref("day");

// 发电趋势数据
const trendData = reactive([
  { time: "00:00", 日喀则光伏板: 0, 胶州风场: 0, 苏州华凌: 0 },
  { time: "02:00", 日喀则光伏板: 1, 胶州风场: 0.5, 苏州华凌: 0.8 },
  { time: "04:00", 日喀则光伏板: 2, 胶州风场: 1.2, 苏州华凌: 1.5 },
  { time: "06:00", 日喀则光伏板: 3, 胶州风场: 2.1, 苏州华凌: 2.3 },
  { time: "08:00", 日喀则光伏板: 4, 胶州风场: 3.2, 苏州华凌: 3.5 },
  { time: "10:00", 日喀则光伏板: 5, 胶州风场: 4.1, 苏州华凌: 4.3 },
  { time: "12:00", 日喀则光伏板: 6, 胶州风场: 5.2, 苏州华凌: 5.5 },
  { time: "14:00", 日喀则光伏板: 6.5, 胶州风场: 5.8, 苏州华凌: 6.1 },
  { time: "16:00", 日喀则光伏板: 6.8, 胶州风场: 6.2, 苏州华凌: 6.5 },
]);

// 发电效率排行数据
const rankingData = reactive([
  { name: "日喀则光伏板", value: 718, color: "#409EFF" },
  { name: "苏州华凌园区", value: 684, color: "#67C23A" },
  { name: "胶东风场", value: 655, color: "#E6A23C" },
  { name: "石碑坡风场", value: 3.5, color: "#F56C6C" },
]);

// 发电量数据
const powerData = reactive([
  {
    name: "当日发电量",
    value: "524.70",
    unit: "Kwh",
    icon: "chart",
    color: "#16A5B7",
    trend: { label: "较昨日", value: -14.12 },
  },
  {
    name: "当月发电量",
    value: "18776.00",
    unit: "Kwh",
    icon: "chart",
    color: "#409EFF",
    trend: { label: "较昨日", value: 151.25 },
  },
  {
    name: "当年发电量",
    value: "158381.00",
    unit: "Kwh",
    icon: "chart",
    color: "#67C23A",
    trend: { label: "较昨日", value: 20.87 },
  },
  {
    name: "累计发电量",
    value: "33621920.00",
    unit: "Kwh",
    icon: "chart",
    color: "#E6A23C",
    trend: { label: "较上月", value: 0 },
  },
]);

// 工单数据
const workOrderData = reactive([
  {
    name: "22",
    time: "2025-08-14 10:30",
    status: "progress",
    statusText: "进行中",
  },
  {
    name: "检修",
    time: "2025-01-10 09:15",
    status: "new",
    statusText: "新工单",
  },
  {
    name: "更换Sim卡",
    time: "2025-01-10 14:20",
    status: "new",
    statusText: "新工单",
  },
  {
    name: "检修电线卡",
    time: "2025-01-10 16:45",
    status: "new",
    statusText: "新工单",
  },
  {
    name: "更换GPU",
    time: "2025-01-10 11:30",
    status: "new",
    statusText: "新工单",
  },
]);

// 计算最大排行值
const maxRankingValue = computed(() => {
  return Math.max(...rankingData.map((item) => item.value));
});

// 发电趋势图表配置
const trendChartOption = computed(() => ({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  legend: {
    data: ["日喀则光伏板", "胶州风场", "苏州华凌"],
    bottom: 10,
    textStyle: {
      color: "#606266",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: trendData.map((item) => item.time),
    axisLabel: {
      color: "#606266",
    },
    axisLine: {
      lineStyle: {
        color: "#E4E7ED",
      },
    },
  },
  yAxis: {
    type: "value",
    name: "Kwh",
    nameTextStyle: {
      color: "#606266",
    },
    axisLabel: {
      color: "#606266",
    },
    axisLine: {
      lineStyle: {
        color: "#E4E7ED",
      },
    },
    splitLine: {
      lineStyle: {
        color: "#E4E7ED",
        type: "dashed",
      },
    },
  },
  series: [
    {
      name: "日喀则光伏板",
      type: "line",
      data: trendData.map((item) => item.日喀则光伏板),
      itemStyle: {
        color: "#409EFF",
      },
      lineStyle: {
        color: "#409EFF",
      },
    },
    {
      name: "胶州风场",
      type: "line",
      data: trendData.map((item) => item.胶州风场),
      itemStyle: {
        color: "#67C23A",
      },
      lineStyle: {
        color: "#67C23A",
      },
    },
    {
      name: "苏州华凌",
      type: "line",
      data: trendData.map((item) => item.苏州华凌),
      itemStyle: {
        color: "#E6A23C",
      },
      lineStyle: {
        color: "#E6A23C",
      },
    },
  ],
}));

// 尖峰平谷电价图表配置
const priceChartOption = computed(() => ({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["峰", "平", "尖", "谷", "深谷"],
    bottom: 10,
    textStyle: {
      color: "#606266",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22"],
    axisLabel: {
      color: "#606266",
    },
    axisLine: {
      lineStyle: {
        color: "#E4E7ED",
      },
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#606266",
    },
    axisLine: {
      lineStyle: {
        color: "#E4E7ED",
      },
    },
    splitLine: {
      lineStyle: {
        color: "#E4E7ED",
        type: "dashed",
      },
    },
  },
  series: [
    {
      name: "峰",
      type: "bar",
      stack: "total",
      data: [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0],
      itemStyle: {
        color: "#E6A23C",
      },
    },
    {
      name: "平",
      type: "bar",
      stack: "total",
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      itemStyle: {
        color: "#67C23A",
      },
    },
    {
      name: "尖",
      type: "bar",
      stack: "total",
      data: [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1],
      itemStyle: {
        color: "#16A5B7",
      },
    },
    {
      name: "谷",
      type: "bar",
      stack: "total",
      data: [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
      itemStyle: {
        color: "#7bfbc8",
      },
    },
    {
      name: "深谷",
      type: "bar",
      stack: "total",
      data: [1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      itemStyle: {
        color: "#4fdaca",
      },
    },
  ],
}));

// 报警数据图表配置
const alarmChartOption = computed(() => ({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["报警数据"],
    bottom: 10,
    textStyle: {
      color: "#606266",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["越下下限", "平均功率因数过低"],
    axisLabel: {
      color: "#606266",
    },
    axisLine: {
      lineStyle: {
        color: "#E4E7ED",
      },
    },
  },
  yAxis: {
    type: "value",
    name: "个",
    nameTextStyle: {
      color: "#606266",
    },
    axisLabel: {
      color: "#606266",
    },
    axisLine: {
      lineStyle: {
        color: "#E4E7ED",
      },
    },
    splitLine: {
      lineStyle: {
        color: "#E4E7ED",
        type: "dashed",
      },
    },
  },
  series: [
    {
      name: "报警数据",
      type: "bar",
      data: [1500, 300],
      itemStyle: {
        color: "#409EFF",
      },
    },
  ],
}));

// 处理标签页变化
const handleTrendTabChange = (tab) => {
  activeTrendTab.value = tab;
};

const handleRankingTabChange = (tab) => {
  activeRankingTab.value = tab;
};

const handleAlarmTabChange = (tab) => {
  activeAlarmTab.value = tab;
};

const handleWorkOrderTabChange = (tab) => {
  activeWorkOrderTab.value = tab;
};

const handlePriceTabChange = (tab) => {
  activePriceTab.value = tab;
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background: #f1f2f5;
  height: 100%;
  overflow-y: auto;
}

.dashboard-header {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .header-content {
    display: flex;
    align-items: center;
    gap: 16px;

    .date-type-selector {
      display: flex;
      gap: 4px;
      background: #f8f9fa;
      padding: 4px;
      border-radius: 12px;
      border: 1px solid #e9ecef;

      span {
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        color: #6c757d;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &.active {
          background: linear-gradient(135deg, #16a5b7, #4fdaca);
          color: white;
          box-shadow: 0 4px 12px rgba(22, 165, 183, 0.3);
        }

        &:hover:not(.active) {
          background: white;
          color: #16a5b7;
        }
      }
    }

    .date-picker {
      :deep(.el-input__wrapper) {
        border-radius: 6px;
        border: 1px solid #dcdfe6;

        &:hover {
          border-color: #16a5b7;
        }

        &.is-focus {
          border-color: #16a5b7;
          box-shadow: 0 0 0 2px rgba(22, 165, 183, 0.2);
        }
      }

      :deep(.el-input__inner) {
        font-size: 14px;
        color: #606266;
      }
    }

    .search-btn {
      padding: 10px 20px;
      background: #16a5b7;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: #4fdaca;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(22, 165, 183, 0.3);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}

.power-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;

  .power-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &:hover {
      background: #fafbfc;
      border-color: #16a5b7;
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #16a5b7 !important;

      .svg-icon {
        font-size: 24px;
        color: #fff !important;
      }
    }

    .card-content {
      flex: 1;

      .card-title {
        font-size: 14px;
        color: #606266;
        margin-bottom: 8px;
        font-weight: 500;
        line-height: 1.2;
      }

      .card-value {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 6px;
        display: flex;
        align-items: baseline;
        gap: 4px;

        .unit {
          font-size: 12px;
          color: #909399;
          font-weight: normal;
        }
      }

      .card-trend {
        font-size: 12px;

        .trend-label {
          color: #909399;
        }

        .trend-value {
          margin-left: 4px;
          font-weight: 600;

          &.positive {
            color: #67c23a;
          }

          &.negative {
            color: #f56c6c;
          }
        }
      }
    }
  }
}

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.chart-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .chart-header {
    padding: 20px 20px 0 20px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;

    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0;
      position: relative;
      line-height: 1.2;

      &::before {
        content: "";
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: linear-gradient(135deg, #16a5b7, #4fdaca);
        border-radius: 2px;
      }
    }
  }

  .chart-content {
    padding: 20px;
    height: 300px;

    .chart {
      width: 100%;
      height: 100%;
    }
  }
}

.ranking-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .ranking-item {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .ranking-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .ranking-name {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
      }

      .ranking-value {
        font-size: 14px;
        font-weight: 600;
        color: #16a5b7;
      }
    }

    .ranking-bar {
      height: 8px;
      background-color: #f0f0f0;
      border-radius: 4px;
      overflow: hidden;

      .bar-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.3s ease;
      }
    }
  }
}

.work-order-table {
  height: 100%;

  .table-header {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
    font-weight: 600;
    color: #606266;
  }

  .table-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }

  .table-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr;
    gap: 12px;
    padding: 8px 0;
    font-size: 12px;
    color: #303133;

    .col-name {
      font-weight: 500;
    }

    .col-time {
      color: #909399;
    }

    .col-status {
      .status-progress {
        color: #e6a23c;
        font-weight: 500;
      }

      .status-new {
        color: #67c23a;
        font-weight: 500;
      }
    }

    .col-action {
      .action-btn {
        padding: 4px 8px;
        background: #16a5b7;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 11px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
          background: #4fdaca;
        }
      }
    }
  }
}
</style>
